<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令</title>
    <!-- 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 什么是指令
            以v-开头的就是指令
    -->
    
    <div class="box">
        <!-- (1)v-text  将变量或表达式作为字符串进行解析  结果会呈现到h1标签中-->
        <h1 v-text="msg"></h1>
        <h1 v-text="msg2.toUpperCase()"></h1>
        <!-- (2)v-html  将变量作为html代码进行解析-->
        <h1 v-html="msg1"></h1>
        <!-- (3)v-once 实现一次性的插入 即当msg的值发生改变时他不再改变，但不影响其他节点msg的值的改变 -->
        <h1 v-once>{{msg}}</h1>
    </div>
    <script>
        //创建vue的实例
        let vm = new Vue({//配置对象
            el:'.box',//决定在那个元素中使用vue语法
            data:{//data中的所有属性都会加到vue的响应系统中，值发生改变，视图也会发生改变
                msg:'国庆节快乐！',
                msg1:'<div>你快乐吗！</div>',
                msg2:'nihao'
            }
        });
        // vm.msg = '很开心！'; 当msg的值发生改变，除了v-once不变，其他节点的msg的值发生改变
    </script>
    <!--
        面试题：
        v-text 与 v-html 谁更安全：
        v-text比v-html更安全，是由其功能所决定的，v-text将内容作为字符串进行解析，而v-html可以解析代码。
    -->
</body>
</html>